﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Main.aspx.cs" Inherits="ATW.Web.Main.Main" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no" />
    <link type="text/css" rel="Stylesheet" href="../Styles/Main.css" />
    <link type="text/css" href="../Styles/Slider.css" rel="stylesheet" />
    <script type="text/javascript" src="../Scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="../Scripts/jquery.event.drag-1.5.min.js"></script>
    <script type="text/javascript" src="../Scripts/jquery.touchSlider.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            $dragBln = false;

            $(".main_image").touchSlider({
                flexible: true,
                speed: 200,
                btn_prev: $("#btn_prev"),
                btn_next: $("#btn_next"),
                paging: $(".flicking_con a"),
                counter: function (e) {
                    $(".flicking_con a").removeClass("on").eq(e.current - 1).addClass("on");
                }
            });

            $(".main_image").bind("mousedown", function () {
                $dragBln = false;
            });

            $(".main_image").bind("dragstart", function () {
                $dragBln = true;
            });

            $(".main_image a").click(function () {
                if ($dragBln) {
                    return false;
                }
            });

            timer = setInterval(function () {
                $("#btn_next").click();
            }, 5000);

            $(".main_visual").hover(function () {
                clearInterval(timer);
            }, function () {
                timer = setInterval(function () {
                    $("#btn_next").click();
                }, 5000);
            });

            $(".main_image").bind("touchstart", function () {
                clearInterval(timer);
            }).bind("touchend", function () {
                timer = setInterval(function () {
                    $("#btn_next").click();
                }, 5000);
            });

        });
    </script>
</head>
<body>
    <div class="container">
        <div class="main_visual">
            <div class="flicking_con">
                <a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">
                    5</a>
            </div>
            <div class="main_image">
                <ul>
                    <li><span class="img_3"></span></li>
                    <li><span class="img_4"></span></li>
                    <li><span class="img_1"></span></li>
                    <li><span class="img_2"></span></li>
                    <li><span class="img_5"></span></li>
                </ul>
                <a style="display: none;" href="javascript:;" id="btn_prev"></a><a style="display: none;"
                    href="javascript:;" id="btn_next"></a>
            </div>
        </div>
        <ul class="navbar ui-flex">
            <li style="border-right: 1px #e2ecf3 solid; border-bottom: 1px #e2ecf3 solid;" class="col33 ui-left ui-box">
                <a><span class="menu1"></span>
                    <p>
                        设备租赁|承包
                    </p>
                </a></li>
            <li style="border-right: 1px #e2ecf3 solid; border-bottom: 1px #e2ecf3 solid;" class="col33 ui-left ui-box">
                <a><span class="menu2"></span>
                    <p>
                        供应商
                    </p>
                </a></li>
            <li style="border-bottom: 1px #e2ecf3 solid;" class="col33 ui-left ui-box"><a><span
                class="menu3"></span>
                <p>
                    物供
                </p>
            </a></li>
        </ul>
        <ul class="navbar ui-flex">
            <li style="border-right: 1px #e2ecf3 solid;" class="col25 ui-left ui-box"><a><span
                class="menu4"></span>
                <p>
                    研发
                </p>
            </a></li>
            <li style="border-right: 1px #e2ecf3 solid;" class="col25 ui-left ui-box"><a><span
                class="menu5"></span>
                <p>
                    合资工厂
                </p>
            </a></li>
            <li style="border-right: 1px #e2ecf3 solid;" class="col25 ui-left ui-box"><a><span
                class="menu6"></span>
                <p>
                    代理商
                </p>
            </a></li>
            <li class="col25 ui-left ui-box"><a><span class="menu7"></span>
                <p>
                    招聘
                </p>
            </a></li>
        </ul>
        <ul class="contant ui-flex">
            <li class="ui-flex">
                <div class="col80">
                    <span class="font-blue font-18">黑水阀</span><span class="radius font-12 bg-orange">降本</span>
                    <span class="ui-right font-12" style="margin-right: 50px;">17人参与竞标</span>
                    <p class=" font-12 font-gray" style="overflow: hidden;">
                        <span class="clock ui-left"></span><span style="line-height: 12px;" class="ui-left">
                            截至日期&nbsp;&nbsp;2016-3-31</span></p>
                    <p>
                        可以在0.25秒内实现开一关一循环,从而实现对陶瓷或者金属滤芯XXXXXXXXXX</p>
                </div>
                <span class="arrow-right ui-right" style="margin-top: 30px; margin-right: 10px;">
                </span>
            </li> 
        </ul> 
            <script type="text/javascript">
                $(function () {
                    var containerHeight = $(".container").height();
                    var windowHeight = $(window).innerHeight();
                    if (windowHeight > containerHeight) {
                        $(".container").height(windowHeight + "px")
                    }
                })   
             </script>

     </div>
</body>
</html>
